<template>
  <view class="app">
    <view class="item">
      <view class="label">头像</view>
      <image
        :src="base64ToBlobUrl(user?.headimg)"
        class="img"
        @click="upUser"
      />
    </view>
    <view class="item" @click="upNick(0)">
      <view class="label">昵称</view>
      <view class="txt">{{ user?.username }}</view>
    </view>
    <view class="item" @click="upNick(1)">
      <view class="label">联系电话</view>
      <view class="txt">{{ user?.telephone }}</view>
    </view>
  </view>
  <view class="bt">
    <view class="btn" @click="logout">退出登录</view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { userInfo, devise } from '@/api/home'
import { base64ToBlobUrl } from '@/common/img'

const user = ref<any>({})

const upUser = () => {
  const token = uni.getStorageSync('token')
  uni.chooseImage({
    count: 9,
    sizeType: ['original', 'compressed'],
    sourceType: ['camera', 'album'],
    success: (res) => {
      uni.uploadFile({
        url: 'http://localhost:8080/devise',
        fileType: 'image',
        filePath: res.tempFilePaths[0],
        name: 'file',
        header: {
          Authorization: `Bearer ${token}`
        },
        success: () => {
          console.log('success!')
        }
      })
    }
  })
}

const upNick = (type: number) => {
  uni.showModal({
    title: `请输入${type === 0 ? '昵称' : '联系电话'}`,
    content: '',
    editable: true,
    confirmText: '确认',
    cancelText: '取消',
    success: async (res) => {
      if (res.confirm) {
        const result =
          type === 0
            ? await devise({ username: res.content })
            : await devise({ telephone: res.content })

        if (result) {
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          })
        }
        await getUser()
      }
    },
    fail: () => {
      console.log('fail')
    }
  })
}

const getUser = async () => {
  console.log('aaa')
  const res = await userInfo()
  user.value = res.data
}

const logout = () => {
  uni.removeStorageSync('token')
  uni.navigateTo({ url: '/pages/others/loginPage' })
}

onLoad(async () => {
  await getUser()
})
</script>

<style scoped lang="scss">
.app {
  width: 100%;
  height: 100%;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    box-shadow: 0px 1px 1px rgb(184, 182, 182);
    .label {
      width: 20%;
      font-size: 34rpx;
    }
    .img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
    }
    .txt {
      width: 30%;
      height: 120rpx;
      line-height: 120rpx;
      text-align: right;
      margin-right: 20rpx;
    }
  }
}
.bt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn {
  width: 95%;
  height: 100rpx;
  position: fixed;
  bottom: 10rpx;
  background-color: #fda15e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 15rpx;
}
</style>
